<!-- NG-ZORRO -->
<nz-layout>
  <nz-affix>
    <nz-header>
      <ul nz-menu nzTheme="dark" nzMode="horizontal" style="line-height:64px">
        <li nz-menu-item>app</li>
        <li nz-menu-item>app</li>
        <li nz-menu-item>app</li>
      </ul>
    </nz-header>
  </nz-affix>
  <nz-content style="padding:0 50px">
    <nz-breadcrumb style="margin:15px 0;"  class="header">
      <nz-breadcrumb-item> app</nz-breadcrumb-item>
      <nz-breadcrumb-item> app</nz-breadcrumb-item>
      <nz-breadcrumb-item> app</nz-breadcrumb-item>
    </nz-breadcrumb>
    <div style="background-color:#ffffff;padding:50px">
      <div nz-row>
        <div nz-col nzSpan="7" *ngFor="let app of [1,1,1,1,1,1,1,1,1]">
          <nz-card nzTitle="Register">
            <p>
              <app-register></app-register>
            </p>
          </nz-card>
        </div>
      </div>
      <nz-divider nzText="avatar"></nz-divider>
      <div nz-row>
        <div nz-col nzSpan="12">
          <nz-avatar nzText="Zj" nzSize="large"></nz-avatar>
        </div>
        <div nz-col nzSpan="12">
          <nz-avatar nzSize="large" nzIcon="anticon anticon-user"></nz-avatar>
        </div>
      </div>
      <nz-divider nzText="badge"></nz-divider>
      <div nz-row>
        <div nz-col nzSpan="8">
          <nz-badge nzCount="8" nzOverflowCount="5">
            <img src="http://placehold.it/32x32" style="border-radius:100%" alt="Alternate Text" />
          </nz-badge>
        </div>
        <div nz-col nzSpan="8">
          <nz-badge nzCount="6" nzOverflowCount="10">
            <nz-avatar nzText="Zj" nzSize="large"></nz-avatar>
          </nz-badge>
        </div>
        <div nz-col nzSpan="8">
          <nz-badge nzCount="6" nzOverflowCount="10">
            <nz-avatar nzIcon="anticon anticon-user" nzSize="large"></nz-avatar>
          </nz-badge>
        </div>
        <div nz-col nzSpan="8">
          <nz-anchor>
            <nz-link nzHref=".header" nzTitle="header"></nz-link>
          </nz-anchor>
        </div>
        <div nz-col nzSpan="8">
          <nz-back-top>
            回到顶部
          </nz-back-top>
        </div>
      </div>
      <nz-divider nzText="calendar"></nz-divider>
      <div nz-row>
        <div nz-col nzSpan="4">
          <nz-calendar [(ngModel)]="date" nzMode="month"></nz-calendar>
        </div>
      </div>
      <nz-divider nzText="templateForm"></nz-divider>
      <div nz-row>
        <div nz-col nzSpan="12">
          <app-template-form></app-template-form>
        </div>
      </div>
      <nz-divider nzText="reactiveForm"></nz-divider>
      <div nz-row>
        <div nz-col nzSpan="12">
          <app-reactive-form></app-reactive-form>
        </div>
      </div>
    </div>
  </nz-content>
  <nz-footer>
    <div nz-row>
      <p style="text-align:center" nz-col nzSpan="4">&copy;2018 版权所属 翻版必究 <span *ngFor="let num of [1,1,1,1,1]" nzColor="#ff0000">&hearts;</span></p>
    </div>
  </nz-footer>
</nz-layout>

